<html>
  <head>
    <title>Canvas Art gallery</title>
    <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
    <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">

	<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

    <script>
    function boot() {
      draw();
    }
    function draw() {
      // Loop through all images
      for (i=0;i<document.images.length;i++){
    
        // Don't add a canvas for the frame image
        if (document.images[i].getAttribute('id')!='frame'){
    
          // Create canvas element
//        var canvas = uuClass.Canvas(document.createElement('CANVAS'));
          var canvas = document.createElement('CANVAS');
          canvas.setAttribute('width',132);
          canvas.setAttribute('height',150);
          document.body.appendChild(canvas);

          canvas = G_vmlCanvasManager.initElement(canvas);
    
          // Insert before the image
          document.images[i].parentNode.insertBefore(canvas, document.images[i]);

          (function(_canvas, _i) {
              var ctx = _canvas.getContext('2d');
        
              // Draw image to canvas
              ctx.drawImage(document.images[_i],15,20);
        
              // Add frame
              ctx.drawImage(document.getElementById('frame'),0,0);
          })(canvas, i);
        }
      }
    }
    </script>
    <style type="text/css">
      body { background: 0 -100px repeat-x url(../demo/images/bg_gallery.png) #4F191A; margin:10px; }
      img { display:none; }
      table { margin: 0 auto; }
      td { padding:15px; }
    </style>
  </head>
  <body onload="boot();">
    <table>
      <tr>
        <td><img src="../demo/images/gallery_1.jpg"></td>
        <td><img src="../demo/images/gallery_2.jpg"></td>
        <td><img src="../demo/images/gallery_3.jpg"></td>
        <td><img src="../demo/images/gallery_4.jpg"></td>
      </tr>
      <tr>
        <td><img src="../demo/images/gallery_5.jpg"></td>
        <td><img src="../demo/images/gallery_6.jpg"></td>
        <td><img src="../demo/images/gallery_7.jpg"></td>
        <td><img src="../demo/images/gallery_8.jpg"></td>
      </tr>
    </table>
    <img src="../demo/images/picture_frame.png" width="132" height="150" id="frame">
  </body>
</html>
